<template>
  <div>
    <el-card class='box-card'>
      <div slot='header' class='clearfix'>
        <h3>评论举报处理</h3>
      </div>
      <div>
        <el-table
          :data='blogData'
          style='width: 100%;margin-bottom: 20px;'
        >
          <el-table-column type='expand'>
            <template slot-scope='props'>
              <el-descriptions class='margin-top' border>
                <el-descriptions-item>
                  <template slot='label'>
                    <i class='el-icon-tickets' />
                    评论内容详情
                  </template>
                  {{ props.row.content }}
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions class='margin-top' border>
                <el-descriptions-item>
                  <template slot='label'>
                    <i class='el-icon-tickets' />
                    举报原因详情
                  </template>
                  {{ props.row.reason }}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column label='评论内容' prop='content' />
          <el-table-column label='评论者' prop='author'>
            <template slot-scope='scope'>
              <div style='display: flex; align-items: center;'>
                <el-avatar :src='scope.row.author.avatar' />
                <span style='text-indent: 1em;'>{{ scope.row.author.userName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label='举报原因' prop='reason' />
          <el-table-column v-if='blogData.length' align='center' label='操作'>
            <template slot-scope='scope'>
              <el-button size='small' @click='ignore(scope.row)'>忽略</el-button>
              <el-button size='small' type='primary' @click='deleteOne(scope.row)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :hide-on-single-page='total <= params.limit'
        layout='total, prev, pager, next'
        :total='total'
        :page-size='params.limit'
        @current-change='changePage'
      />
    </el-card>
  </div>
</template>

<script>
import Sys_AdminService from '@/service/admin/Sys_AdminService'
import Filters from '@/tools/Filters'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import BlogService from '@/service/blogs/BlogService'

export default {
  name: 'CommentTipOff',
  filters: {
    timeFormat: Filters.timeFormat
  },
  directives: {
    codeLight: {
      inserted(el) {
        setTimeout(() => {
          const codes = el.querySelectorAll('pre code')
          codes.forEach(code => hljs.highlightBlock(code))
        }, 10)
      }
    }
  },
  data() {
    return {
      blogData: [],
      params: {
        limit: 6,
        skip: 0
      },
      total: 0
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await Sys_AdminService.getTipOffComment(this.params)
      if (res.data.status !== 200) return this.blogData = []
      this.blogData = res.data.data.tipData
      this.total = res.data.data.total
    },
    changePage(page) {
      this.params.skip = (page - 1) * this.params.limit
      this.initData()
    },
    async ignore(row) {
      const res = await Sys_AdminService.deleteCommentTipOff({tipOffId: row.tipOffId})
      if (res.data.status !== 200) return this.$message.error(res.data.message)
      this.$message.success(res.data.message)
      setTimeout(() => this.initData(), 1500)
    },
    deleteOne(row) {
      this.$confirm('确定要删除该评论吗？', '删除评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'fx-button-primary',
        cancelButtonClass: 'fx-button-default',
        type: 'warning'
      }).then(() => {
        if(!row.parentId) this.deleteComment(row)
        else this.deleteReply(row)
      }).catch(() => {
      })
    },
    // 删除一级评论
    async deleteComment(row) {
      let data = {
        blogId: row.blogId,
        author_id: row.commentator_id,
        commentId: row.commentId
      }
      // 删除评论
      const res = await BlogService.deleteComment(data)
      if (res.data.status !== 200) {
        return this.$message.error(res.data.message)
      }
      this.$message.success(res.data.message)
      setTimeout(() => this.initData(), 1500)
    },
    // 删除二级回复
    async deleteReply(row) {
      // 评论数据
      const data = {
        blogId: row.blogId,
        parentId: row.parentId,
        commentId: row.commentId
      }
      // 删除回复
      const res = await BlogService.deleteReply(data)
      if (res.data.status !== 200) {
        return this.$message.error(res.data.message)
      }
      this.$message.success(res.data.message)
      setTimeout(() => this.initData(), 1500)
    },
    handleCommand(command) {
      switch (command.cmd) {
        case 'ignore':
          this.retrialBlog(command.row)
          break
        case 'deleteOne':
          this.deleteOne(command.row)
          break
        default:
          break
      }
    }
  }
}
</script>

<style>

.el-message-box {
  width: 360px !important;
}

.el-message-box__status.el-icon-warning {
  color: red;
}

.fx-button-primary {
  color: #FFF;
  background-color: rgb(250, 84, 28) !important;
  border-color: rgb(234, 113, 72) !important;
  transition: .2s;
}

.fx-button-primary:hover {
  background-color: rgba(250, 84, 28, 0.8) !important;
  transition: .3s;
}

.fx-button-default {
  transition: .2s;
}

.el-button:active {
  color: rgb(250, 84, 28) !important;
  border-color: rgb(234, 113, 72) !important;
}

.fx-button-default:hover {
  color: rgba(250, 84, 28, 0.8);
  border-color: rgb(234, 113, 72);
  background-color: rgba(250, 84, 28, 0.1);
  transition: .3s;
}

.el-select-dropdown__item.selected {
  color: rgba(250, 84, 28) !important;
}
</style>

<style scoped>

>>> .el-button--primary {
  color: #FFF;
  background-color: rgb(250, 84, 28);
  border-color: rgb(234, 113, 72);
  transition: .2s;
}

>>> .el-button--default:focus{
  background: #FFF;
  border: 1px solid #DCDFE6;
  color: #606266;
}

>>> .el-button--primary:hover {
  background-color: rgba(250, 84, 28, 0.8);
  transition: .3s;
}

>>> .el-button--default {
  transition: .2s;
}

>>> .el-button--default:hover {
  color: rgba(250, 84, 28, 0.8);
  border-color: rgb(234, 113, 72);
  background-color: rgba(250, 84, 28, 0.1);
  transition: .3s;
}

>>> .el-button--text {
  color: rgb(250, 84, 28);
  transition: .2s;
}

>>> .el-button--text:hover {
  color: rgba(250, 84, 28, 0.8);
  transition: .3s;
}

.el-dropdown-link {
  font-size: 12px;
  cursor: pointer;
  color: rgb(250, 84, 28);
}

.el-dropdown-link:hover {
  color: rgba(250, 84, 28, 0.8);
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown-menu__item:hover {
  color: rgba(250, 84, 28, 0.8);
}

>>> .el-table thead {
  color: rgba(0, 0, 0, 0.7);
}

>>> .el-popover {
  position: absolute;
  top: 100px !important;
}

>>> .el-pager li:hover,
>>> .el-pagination button:hover {
  color: rgba(250, 84, 28, 0.8);
}

>>> .el-pager li.active {
  color: rgba(250, 84, 28, 0.8);
}

>>> .el-descriptions-item__label.is-bordered-label {
  width: 10%;
}

>>> .el-table .cell {
  white-space: nowrap;
}
</style>



